<template>
  <div>
    <a-row :gutter="10">
      <a-col :span="16">
        <a-card>
          <div class="card-header"><span class="border"></span>基础信息</div>
          <div class="card-body">
            <a-row>
              <a-col :span="8">
                <label>订单号:</label><span>
                 <a>{{baseModel.orderId}} </a><a id="tag-copy" @click="copyHandle(baseModel.orderId)">&nbsp;&nbsp; copy</a>
                  </span>
              </a-col>
              <a-col :span="8"> <label>店铺名称：</label><span><j-ellipsis :value="baseModel.storeName" :length="10"></j-ellipsis> </span> </a-col>
              <a-col :span="8"> <label>市场：</label><span>{{baseModel.site}}</span> </a-col>
              <a-col :span="8"> <label>发货方式：</label><span>{{baseModel.deliveryWay_dictText}}</span> </a-col>
              <a-col :span="8"> <label>订单状态：</label><span>{{baseModel.orderStatus_dictText}}</span> </a-col>
              <a-col :span="8"> <label>发货进度：</label><span>{{baseModel.amzOrderStatus}}</span></a-col>
              <a-col :span="8"> <label>订单类型：</label><span>{{baseModel.orderSource_dictText}}</span> </a-col>
              <a-col :span="8"> <label>IOSS：</label><span>{{baseModel.ioss}}</span> </a-col>
              <a-col :span="8"> <label>EORI：</label><span>{{baseModel.eori}}</span> </a-col>
              <a-col :span="8"> <label>税号：</label><span>{{baseModel.taxNum}}</span> </a-col>
              <a-col :span="8"> <label>是否有售后：</label><span>{{baseModel.afterSales}}</span> </a-col>
              <a-col :span="8"> <label>创建时间：</label><span>{{baseModel.purchaseDate}}</span> </a-col>
              <a-col :span="8"> <label>审核时间：</label><span>{{baseModel.auditTime}}</span> </a-col>
              <a-col :span="8"> <label>发货时间：</label><span>{{baseModel.deliveryTime}}</span> </a-col>
              <a-col :span="8"> <label>变更时间：</label><span>{{baseModel.lastUpdateDate}}</span> </a-col>
              <a-col :span="24"> <label>运营备注：</label><span>{{baseModel.remark}}</span> </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          <div class="card-header"><span class="border"></span>客户信息</div>
          <div class="card-body">
            <a-row>
              <a-col :span="24"> <label>买家姓名：</label><span>{{baseModel.buyerName}}</span> </a-col>
              <a-col :span="24"> <label>客户国家：</label><span>{{baseModel.buyerCounty}}</span> </a-col>
              <a-col :span="24"> <label>客户邮箱：</label><span>{{baseModel.buyerEmail}}</span> </a-col>
              <a-col :span="24"> <label>开票信息：</label><span>{{baseModel.buyerTaxInfo}}</span> </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
  name: 'baseInfo', //基础信息
  props:{
    orderInfo:{
      type:Object,
      default:()=>{}
    },
    buyInfo:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
    
    }
  },
  computed:{
    baseModel(){
      return {  ...this.orderInfo, ...this.buyInfo }
    }
  },
  methods:{
    //复制
    copyHandle(orderId) {
      let clipboard = new Clipboard('#tag-copy', {
        text: () => {
          return orderId
        },
      })
      clipboard.on('success', () => {
        this.$message.success('复制成功！')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('该浏览器不支持自动复制,请手动复制！')
        clipboard.destroy()
      })
    },
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-col {
  margin-bottom: 6px;
  label{
    color: rgba(0,0,0,.85);
  }
  span{
    color: rgba(0,0,0,.65);
  }
}
/deep/.ant-card {
  min-height: 230px;
  box-shadow: 0 0 3px 3px #E5E5E5;
  .ant-card-body {
    padding: 10px 0;
  }
}
.card-header {
  font-size: 16px;
  margin-bottom: 10px;
  span {
    padding: 4px 2px;
    background: #1890ff;
    margin-right: 6px;
  }
}
.card-body {
  padding: 0 15px;
  span {
    margin-right: 6px;
  }
}
</style>